<template>
  <!-- 部门 -->
  <tree-select
    mark="dept"
    v-bind="$attrs"
    :data="deptOptions"
    :default-expand-all="true"
    node-key="id"
    @input="$emit('input', $event)"
    @change="$emit('change', $event)"
  >
    <label slot="option-label" slot-scope="{ node, shouldShowCount, count, labelClassName, countClassName }" :class="labelClassName">
      {{ $t(node.label) }}
      <span v-if="shouldShowCount" :class="countClassName">({{ count }})</span>
    </label>
  </tree-select>
</template>

<script>
import { mapState } from 'vuex'
import TreeSelect from '@/components/TreeSelect'
export default {
  name: 'DeptSelect',
  components: {
    [TreeSelect.name]: TreeSelect
  },
  computed: {
    ...mapState({
      deptOptions: state => state.user.deptOption
    })
  }
}
</script>
